<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="test"></div>
  
  <!-- 引入react核心库 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- 用于支持react操作DOM -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 用于将jsx转为js -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  
  <script type="text/babel">
    // 创建组件
    class Count extends React.Component{
      //构造器
      constructor(props){
        console.log('Count---constructor');
        super(props)
        //初始化状态
        this.state={count:0}
      }
      
      //加1按钮的回调
      add=()=>{
        const {count}=this.state;
        this.setState({count:count+1})
      }

      //卸载组件按钮的回调
      death=()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }

      //强制更新按钮的回调
      force=()=>{
        //强制更新组件，不用进过阀门
        this.forceUpdate()
      }

      //组件将要挂载的钩子
      UNSAFE_componentWillMount(){
        console.log('Count---componentWillMount');
      }

      //组件挂载完毕的钩子
      componentDidMount(){
        console.log('Count---componentDidMount');
      }

      //组件将要卸载的钩子
      componentWillUnmount(){
        console.log('Count---componentWillUnmount');
      }

      //控制组件更新的”阀门“，不写时默认调用返回true
      shouldComponentUpdate(){
        console.log('Count---shouldComponentUpdate');
        return false
      }

      //组件将要更新的钩子
      UNSAFE_componentWillUpdate(){
        console.log('Count---componentWillUpdate');
      }

      //组件更新完毕的钩子
      componentDidUpdate(){
        console.log('Count---componentDidUpdate');
      }

      render(){
        console.log('Count---render');
        let {count}=this.state;
        return(
          <div>
            <h1>当前的数据是：{count}</h1>
            <button onClick={this.add}>点击+1</button>
            <button onClick={this.death}>卸载组件</button>
            <button onClick={this.force}>强制更新</button>
          </div>
        )
      }
    }

    //渲染组件
    ReactDOM.render(<Count/>,document.getElementById('test'))
  </script>
</body>
</html>